<template>
  <div class="category-wrapper">
    <a-card
      class="custom-card"
      :tab-list="categoryTabList"
      :active-tab-key="categoryKey"
      @tabChange="key => onCategoryTabChange(key)"
    >
      <div v-if="categoryKey === 'law'">
        <!-- 加载状态 -->
        <div v-if="isLoadingLaw" class="loading-container">
          <div class="loader"></div>
        </div>
        <ul v-else class="styled-list">
          <li v-for="(item, index) in lawConsultationData" :key="index">
            <router-link :to="{ name: 'PlantPage', params: { id: item.id } }">
              {{ item.title }}
              <div class="time">{{ item.date }}</div>
            </router-link>
          </li>
        </ul>
        <router-link to="/Policie/Plant" class="text-sky-400">更多</router-link>
      </div>
    </a-card>

    <div class="category-block">
      <!-- 加载状态 -->
      <div v-if="isLoadingImages" class="loading-container">
        <div class="loader"></div>
      </div>
      <div v-else v-for="(image, index) in categoryImages" :key="index" class="category-item">
        <router-link :to="getLink(image.id)" exact-active-class="active">
          <img :src="image.src" :alt="image.title">
          <p class="flex justify-center">{{ image.title }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
  baseURL,
  getHomeCategoryBlockAPI,
  getPlantQuarantineAPI,
} from '../apis/homeAPI.js';

const categoryImages = ref([]);
const lawConsultationData = ref([]);
const categoryKey = ref('law');
const categoryTabList = [
  {
    key: 'law',
    tab: '政策法规',
  },
];

// 新增加载状态
const isLoadingImages = ref(true);
const isLoadingLaw = ref(true);

const getHomeCategoryBlock = async () => {
  isLoadingImages.value = true; // 设置为加载中
  try {
    const res = await getHomeCategoryBlockAPI();
    const { data } = res;
    categoryImages.value = data.map(item => ({
      id: item.id,
      src: baseURL + `${item.attributes.src.data.attributes.url}`,
      title: item.attributes.title,
    })).slice(0, 2);
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    isLoadingImages.value = false; // 请求完成后结束加载
  }
};

const getPlantQuarantine = async () => {
  isLoadingLaw.value = true; // 设置为加载中
  try {
    const res = await getPlantQuarantineAPI();
    const { data } = res;
    lawConsultationData.value = data.map(item => ({
      id: item.id,
      title: item.attributes.name,
      date: item.attributes.time,
    })).slice(0, 7);
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    isLoadingLaw.value = false; // 请求完成后结束加载
  }
};

const getLink = (id: number) => {
  switch (id) {
    case 1:
      return '/popsci/information';
    case 2:
      return '/popsci/directory';
    default:
      return '/popsci'; // 默认路径
  }
};

const onCategoryTabChange = (value: string) => {
  categoryKey.value = value;
};

// 获取数据
onMounted(() => {
  getHomeCategoryBlock();
  getPlantQuarantine();
});
</script>

<style scoped>
.category-wrapper {
  max-width: 1500px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  flex-wrap: wrap;
}

.category-block {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 50%;
}

.category-item {
  flex: 1 1 calc(100% - 20px);
}

.category-item img {
  width: 85%;
  height: 300px;
  object-fit: cover;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.category-item img:hover {
  transform: scale(1.05);
}

.category-item p {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.custom-card {
  max-width: 1200px;
  padding: 30px;
  background-color: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  flex: 0 0 calc(50% - 20px);
}

.styled-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.styled-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f8ff;
  display: flex;
  flex-direction: column;
}

.styled-list li .time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.styled-list li:last-child {
  border-bottom: none;
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px; /* 设置高度以使加载图标居中 */
}

.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
